import React from 'react';
import styles from "@/pages/page/index.module.scss";
import pieChart from "@/pages/page/components/pieChart";
import lineChart from "@/pages/page/components/lineChart";

function Card(props) {
  const { ddPieSource,data,userLineSource,listType,key } = props;
  // 当组件的属性发生变化时，调用父组件传递的回调函数
  React.useEffect(() => {
    if (typeof props.onReceiveProps === 'function') {
      props.onReceiveProps(props);
    }
  }, [props]);

  let chart=listType==2?'chart1':'chart2'
  return (
      data?.type==3?
        <div key={key} className={styles[chart]}>
          {/*<span className={`${styles.title} ${styles.fontSize16}`}>调度任务运行状态</span>*/}
          {/*<div className={styles.card}>*/}
          <div className={styles.cardTop}>
            <div className={styles.cardTopText}>
              <div className={styles.cardText1}>{data?.name}</div>
              <div className={styles.cardText2}>
                <span>{data?.num}</span>
                亿
              </div>
              <div className={styles.cardText3}>{data?.date}</div>
            </div>
            <div className={styles.cardTopText}>
              <div className={styles.cardText1}>{data?.name1}</div>
              <div className={styles.cardText2}>
                <span>{data?.num1}</span>
                亿
              </div>
              <div className={styles.cardText3}>{data?.date1}</div>
            </div>
          </div>
          <div className={styles.cardBottom}>
            <div className={styles.cardText4}>
              较上日：
              <span>
                      +0.61
                    </span>
            </div>
            <div className={styles.cardText5}>较年初：
              <span>
                      -0.62
                    </span>
            </div>
          </div>
        </div>
        :
        data?.type==4?
          <div key={key} className={styles[chart]}>
            {/*<span className={`${styles.title} ${styles.fontSize16}`}>调度任务运行状态</span>*/}
            {/*<div className={styles.card}>*/}
            <div className={styles.cardTop}>
              <div className={styles.cardTopText}>
                <div className={styles.cardText1}>{data?.name}</div>
                <div className={styles.cardText2}>
                  <span>{data?.num}</span>
                  亿
                </div>
                <div className={styles.cardText3}>{data?.date}</div>
              </div>
              <div className={styles.cardTopChart}>
                {lineChart(userLineSource)}
              </div>
            </div>
            <div className={styles.cardBottom}>
              <div className={styles.cardText4}>
                较上日：
                <span>
                      +0.61
                    </span>
              </div>
              <div className={styles.cardText5}>较年初：
                <span>
                      -0.62
                    </span>
              </div>
            </div>
          </div>
          :
        <div key={key} className={styles[chart]}>
          <div className={styles.cardTop}>
            <div className={styles.cardTopText}>
              <div className={styles.cardText1}>{data?.name}</div>
              <div className={styles.cardText2}>
                <span>{data?.num}</span>
                亿
              </div>
              <div className={styles.cardText3}>{data?.date}</div>
            </div>
            <div className={styles.cardTopChart}>
              {data?.type==1?pieChart(ddPieSource):''}
            </div>
          </div>
          <div className={styles.cardBottom}>
            <div className={styles.cardText4}>
              较上日：
              <span>
                      +0.61
                    </span>
            </div>
            <div className={styles.cardText5}>较年初：
              <span>
                      -0.62
                    </span>
            </div>
          </div>
        </div>
  );
}

export default Card;
